<template>
	<view>
		<HeaderBar title="历史订单" :opacity="opacity" color="#fff" />
		<view class="bg"></view>
		<u-gap :height="32"></u-gap>
		<view class="content">
			<view class="content-title">历史订单</view>
			<view class="content-subTitle">您的历史订购将在此展示</view>
		</view>
		<view class="search">
			<picker mode="date" fields="month" @change="dateChange">

				<view class="search-item">
					<image src="/static/icn-箭头-下.png" mode=""></image>
					{{params.year}}年{{params.month}}月
				</view>
			</picker>
			<picker mode="selector" :range="isUseList" range-key="name" @change="useChange">
				<view class="search-item">
					<image src="/static/icn-箭头-下.png" mode=""></image>
					{{ isUseList.find(i=>i.value === params.is_use).name }}
				</view>
			</picker>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="list-item" v-for="it in list">
				<view class="list-item-header">
					<view class="list-item-header-img">
						<image :src="it.hospital.img" mode="aspectFill" class="list-item-header-img-bg"></image>

						<view class="list-item-header-img-status" v-if="it.is_pay === 0">
							待支付
						</view>
						<view class="list-item-header-img-status" v-if="it.is_pay === 1 && it.is_use === 0">
							待核销
						</view>
					</view>
					<view class="list-item-header-title">{{it.hospital.title || ''}}</view>
				</view>
				<view class="content-list">
					<view class="content-list-item">
						<image src="/static/8.png" mode=""></image>
						<view class="content-list-item-r">
							<view class="content-list-item-r-title">地址</view>
							<view class="content-list-item-r-subTitle">
								{{it.hospital.address || ''}}
							</view>
						</view>
					</view>
					<view class="content-list-item">
						<image src="/static/9.png" mode=""></image>
						<view class="content-list-item-r">
							<view class="content-list-item-r-title">服务</view>
							<view class="content-list-item-r-subTitle">
								{{it.hospital.serve || ''}}
							</view>
						</view>
					</view>
					<view class="content-list-item">
						<image src="/static/10.png" mode=""></image>
						<view class="content-list-item-r">
							<view class="content-list-item-r-title">就诊人</view>
							<view class="content-list-item-r-subTitle">
								{{it.order_user.name || ''}}
							</view>
						</view>
					</view>
					<view class="content-list-item">
						<image src="/static/11.png" mode=""></image>
						<view class="content-list-item-r">
							<view class="content-list-item-r-title">日期</view>
							<view class="content-list-item-r-subTitle">
								{{it.reservation_date || ''}}
							</view>
						</view>
					</view>
					<view class="list-item-btn" v-if="it.is_pay === 0" @click="pay(it)">
						订单支付
						<image src="/static/7.png" mode=""></image>
					</view>
					<view class="list-item-btn" v-if="it.is_pay === 1 && it.is_use === 0"
						@click="toDetail(it.qr_code_img)">
						订单核销
						<image src="/static/7.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>
		<view class="noData" style="padding-bottom:120rpx;" v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>
	</view>
</template>

<script>
	import HeaderBar from "@/components/header/header.vue"
	import {
		formatNowTime
	} from '@/common/time.js'
	import {
		orderList,orderPay
	} from '@/common/http/api.js'
	export default {
		components: {
			HeaderBar
		},
		data() {
			return {
				opacity: 0,
				params: {
					page: 1,
					year: '',
					month: '',
					is_use: 0
				},
				list: [],
				isList: true,
				isUseList: [{
						name: '未核销',
						value: 0
					},
					{
						name: '已核销',
						value: 1
					}
				]
			};
		},
		onLoad() {
			let time = formatNowTime(2).split('.')
			console.log('time', time)

			this.params.year = time[0]
			this.params.month = time[1]

			this.reload()
		},
		onReachBottom() {
			if (this.isList) {
				this.params.page++
				this.init()
			}
		},
		onPullDownRefresh: function() {
			console.log('我被下拉了');
			// this.params.month = ''
			// this.params.year = ''
			this.reload(1)
		},
		methods: {
			useChange(e) {
				console.log('e', e)
				this.params.is_use = this.isUseList[e.detail.value].value
				this.reload()
			},
			dateChange(e) {
				console.log('e', e)
				let time = e.detail.value.split('-')
				this.params.year = time[0]
				this.params.month = time[1]
				this.reload()
			},
			reload(type) {
				this.params.page = 1
				this.list = []
				this.init(type)
			},
			//0 默认 1上拉
			init(type = 0) {
				uni.showLoading()
				orderList(this.params).then(res => {
					if (Array.isArray(res.data.list.data) && res.data.list.data.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data.list.data
						} else {
							this.list = this.list.concat(res.data.list.data)
						}
					} else {
						this.isList = false
					}
				}).finally(() => {
					uni.hideLoading()
					if (type === 1) {
						uni.stopPullDownRefresh();
					}
				})
			},
			toDetail(url) {
				uni.setStorageSync('qrcode', url)
				uni.navigateTo({
					url:'/pages/order_write_off/order_write_off'
				})
			},
			pay(row){
				uni.showLoading({
					mask: true
				})
				orderPay({order_id: row.id}).then(res => {
					uni.hideLoading()
					let info = res.data
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: res.data.timestamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: res => {
							console.log('支付成功', res);
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							this.reload()
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					})
					// uni.showToast({
					// 	title: '提交成功',
					// 	icon: 'none'
					// })
					// setTimeout(()=>{
					// 	uni.navigateBack()
					// },1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 300rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #0065FF;

	}

	.qrCode {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 100rpx 0;

		.qrCode-img {
			width: 400rpx;
			height: 400rpx;
			margin-bottom: 90rpx;
		}

		.qrCode-title {
			color: #000000;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			margin-bottom: 116rpx;
		}

		.qrCode-btn {
			width: 364rpx;
			height: 90rpx;
			flex-shrink: 0;
			fill: #0065FF;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #0065FF;
			font-family: "PingFang SC";
			font-size: 36rpx;
			font-style: normal;
			font-weight: 500;
			background: #E6F0FF;
			border-radius: 46rpx;
		}
	}

	.content {
		width: 100%;
		position: relative;
		background: white;
		box-sizing: border-box;
		padding: 0 40rpx;
		margin-bottom: 58rpx;

		.content-title {
			color: #112950;
			font-family: "PingFang SC";
			font-size: 48rpx;
			font-style: normal;
			font-weight: 400;
			margin-bottom: 4rpx;
		}

		.content-subTitle {
			color: #b2bac6;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
		}
	}

	.content::before {
		content: "";
		width: 100%;
		height: 45rpx;
		background: white;
		border-top-right-radius: 50rpx;
		position: absolute;
		top: -42rpx;
		left: 0;
	}

	.search {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		display: flex;
		margin-bottom: 20rpx;

		.search-item {
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}

			color: #3f8cff;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
		}

		.search-item:first-child {
			margin-right: 40rpx;
		}
	}

	.list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-bottom: 40rpx;

		.list-item {
			border-radius: 24rpx;
			border: 2rpx solid #E5E5E5;
			margin-bottom: 30rpx;

			.list-item-header {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				border-bottom: 1rpx solid #F2F4F5;

				.list-item-header-img {
					width: 100%;
					height: 332rpx;
					flex-shrink: 0;
					border-radius: 24rpx;
					position: relative;
					margin-bottom: 30rpx;

					.list-item-header-img-bg {
						width: 100%;
						height: 100%;
					}

					.list-item-header-img-status {
						width: 144rpx;
						height: 74rpx;
						background: url(@/static/Frame.png);
						background-size: 100% 100%;
						text-align: center;
						line-height: 57rpx;
						font-size: 26rpx;
						color: #fff;
						position: absolute;
						right: -14rpx;
						top: 30rpx;
						z-index: 2;

					}
				}

				.list-item-header-title {
					color: #112950;
					font-family: "PingFang SC";
					font-size: 34rpx;
					font-style: normal;
					font-weight: 400;
				}
			}
		}
	}

	.content-list {
		width: 100%;
		border-top: 1rpx solid #E5E5E5;
		box-sizing: border-box;
		padding: 30rpx 40rpx;

		.content-list-item {
			width: 100%;
			display: flex;
			margin-bottom: 60rpx;

			&>image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			.content-list-item-r {
				flex: 1;
				min-width: 0;

				.content-list-item-r-title {
					color: #112950;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					margin-bottom: 10rpx;
				}

				.content-list-item-r-subTitle {
					color: #0f62f9;
					font-family: "PingFang SC";
					font-size: 34rpx;
					font-style: normal;
					font-weight: 600;
				}
			}
		}
	}

	.list-item-btn {
		width: 500rpx;
		height: 80rpx;
		flex-shrink: 0;
		border-radius: 24rpx;
		border: 2rpx solid #E5E5E5;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0065ff;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 400;

		image {
			width: 32.67rpx;
			height: 32rpx;
			margin-left: 20rpx;
		}
	}
</style>